<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>报名</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" />
    <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
    <meta name="author" content="GetTemplates.co" />
    <link rel="shortcut icon" href="" type="image/x-icon" />

    <link rel="stylesheet" href="${ctx}/assets/layouts/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/icomoon.css">
    <!-- Themify Icons-->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/themify-icons.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/bootstrap.css">
    <!-- Magnific Popup -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/magnific-popup.css">
    <!-- Owl Carousel  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.theme.default.min.css">
    <!-- Theme style  -->
    <link rel="stylesheet" href="${ctx}/assets/layouts/css/style.css">
    <link href="${ctx}/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="${ctx}/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.css" rel="stylesheet" type="text/css" />
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN THEME GLOBAL STYLES -->
    <link href="${ctx}/assets/global/css/components-rounded.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <!-- Modernizr JS -->
    <script src="${ctx}/assets/layouts/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
</head>
<style>
    .gtco-container {
        margin-top: -1em;
    }
    .spinner-div {
        float: left;
        width: 104px;
    }
    .gtco-cover a {
         background-color: #FBB448!important;
    }
    .price-label {
        float: left;
        padding-left: 20px;
        margin-top: 8px;
    }
    .price-div {
        padding-left: 10%;
        height: 40px;
    }
    .way {
        margin-top: 15px;
    }
    p {
        font-size: 1.3rem;
        line-height: 1.5rem;
        margin: 0 0 10px 0!important;
    }
    .content-out {
        text-align: center;
        font-size: 1.8rem;
        line-height: 2.0rem;
    }
    #gtco-header .form-wrap .tab-content .form-control {
        color: black !important;
        border: 2px solid rgba(255, 255, 255, 0.2);
    }
</style>
<body>
<div id="page1">
    <header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-image: url(${ctx}/assets/layouts/images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
        <div class="overlay"></div>
        <div class="gtco-container">
            <div class="row">
                <div class="col-md-12 col-md-offset-0 text-left">
                    <div class="row row-mt-15em" style="margin-top: 3em;">
                        <div class="col-md-7 mt-text animate-box" style="margin-bottom: 1em;" data-animate-effect="fadeInUp">
                            <span class="intro-text-small">Start a wonderful <label style="color: #fbb448">journey</label></span>
                            <h1 class="cursive-font" style="font-size: 30px!important;">开启一段美妙的旅程</h1>
                        </div>
                        <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
                            <div class="form-wrap">
                                <div class="tab">
                                    <div class="tab-content">
                                        <div class="tab-content-inner active" data-content="signup">
                                            <div id="error-message" style="color: red;margin-bottom: 10px;"></div>
                                            <h3 class="cursive-font" style="font-size: 22px;">选择线路</h3>
                                            <form id="sign-form" action="${ctx}/app/writeSign" method="post">
                                                <input type="hidden" id="userDetails" name="userDetails"/>
                                                <div class="row form-group">
                                                    <select class="form-control way" id="way" name="way"
                                                            data-rule-required="true" data-msg-required="请选择线路">
                                                        <option class="way-option" value="0">请选择线路</option>
                                                        <c:forEach items="${data_list}" var="product" varStatus="s">
                                                            <option class="way-option" value="${product.id}">${s.count}.${product.name}</option>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                                <div id="select-price" class="row form-group select-price">
                                                    <div class="price-div">
                                                        <div class="spinner-div">
                                                            <input type="text"  class="spinner"/>
                                                        </div>
                                                        <label class="price-label">0元/人</label><br>
                                                    </div>
                                                    <div class="price-div">
                                                        <div class="spinner-div">
                                                            <input type="text" class="spinner"/>
                                                        </div>
                                                        <label class="price-label">0元/人</label><br>
                                                    </div>
                                                </div>
                                                <div class="row form-group">
                                                    <div class="col-md-12">
                                                        <a style="color: white!important;" href="javascript:writeSign();;" id="submit_register" class="btn btn-block">填写报名信息</a>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="gtco-section">
        <div class="gtco-container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2 class="cursive-font primary-color"
                        style="text-align:left;font-family: 'Lato', Arial, sans-serif;font-size: 1.2em;margin-bottom: 10px;">
                        活动说明</h2>
                    <p class="content-out">建行龙支付携手领海之旅推出龙支付之旅特惠产品线路</p>
                    <p>1、野三坡百里峡七彩小镇孤山寨二日<br>&nbsp;&nbsp;成人价格：338元/人；含漂流：368元/人 <br>&nbsp;&nbsp;儿童： 150元/人<br>&nbsp;&nbsp;发团日期：10月1日-7日 天天发团</p>
                    <p>2、太行水镇 白石山全景外观易水湖品质二日<br>&nbsp;&nbsp;成人价格：418元/人；儿童价格：198元/人<br>&nbsp;&nbsp;发团日期：10月1日-5日 天天发团</p>
                    <p>3、秋景张北天路—张北天鹿大本营夜宿雪乡民宿品质二日<br>&nbsp;&nbsp;成人价格：378元/人；儿童价格：220元/人<br>&nbsp;&nbsp;发团日期：10月1日-5日 天天发团</p>
                    <p>4、金秋草原丰宁坝上草原嘉年华干年冰臼佛珠洞休闲二日/三日<br>&nbsp;&nbsp;成人价格：二日398元/人 儿童价格：220元/人<br>&nbsp;&nbsp;三日518元/人 儿童价格：280元/人</p>
                    <p>5、赏自然风光山叶口 游滦州古城 品尝特色农家餐绿色休闲二日<br>&nbsp;&nbsp;成人价格：308元/人；儿童价格：140元/人<br>&nbsp;&nbsp;发团日期：10月1日-5日 天天发团</p>
                    <p>6、山海关古城 东戴河海鲜大餐休闲二日<br>&nbsp;&nbsp;成人价格：358元/人；儿童价格：140元/人<br>发团日期：10月1日-5日 天天发团</p>
                    <p>7、畅游古北 登司马台长城 观水镇夜景 挑战石林峡 UFO观景台休闲二日<br>&nbsp;&nbsp;成人价格：458元/人；儿童价格：198元/人<br></p>
                    <p class="content-out">以上产品线路客户通过龙支付APP支付购买均享受“满300减60”的特惠活动<br>&nbsp;&nbsp;活动日期：9月26号-10月10号</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctx}/assets/layouts/js/jquery.min.js"></script>
<script src="${ctx}/assets/layouts/js/jquery.waypoints.min.js"></script>
<script src="${ctx}/assets/layouts/js/moment.min.js"></script>
<script src="${ctx}/assets/layouts/js/owl.carousel.min.js"></script>
<script src="${ctx}/assets/layouts/js/main.js"></script>
<script src="${ctx}/assets/pages/scripts/app.js"></script>
<script src="${ctx}/assets/global/plugins/jquery-validation/js/jquery.validate.js" type="text/javascript"></script>
<script src="${ctx}/assets/pages/scripts/md5.js"></script>
<script src="${ctx}/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${ctx}/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<script>
    $(function () {
        <%--ajaxLoad({}, "${ctx}/app/details/YE", "select-price");--%>
        // 初始化加减器
        initSpin();
        // 级联更新
        $("#way").change(function () {
            $("#select-price").html("");
            var wayId = $(this).val();
            if (wayId == 0) {
                console.log("00");
                var defaultDetail = '<div class="price-div"><div class="spinner-div"><input type="text"  class="spinner"/></div><label class="price-label">0元/人</label><br></div>' +
                        '<div class="price-div"><div class="spinner-div"><input type="text"  class="spinner"/></div><label class="price-label">0元/人</label><br></div>';
                $("#select-price").html(defaultDetail);
                initSpin();
            } else {
                ajaxLoad({}, "${ctx}/app/details/" + wayId, "select-price");
            }
        });
    })

    function initSpin() {
        $('.spinner').TouchSpin({
            min: 0, // 最小值
//            max: 2, // 最大值
            step: 1, // 步长
            initval: 0 // 初始值
        });
    }

    function writeSign() {
        console.log("writeSign");
        if ($("#way").val() == 0) {
            alert("请选择线路");
            return;
        }
        var userDetails = new Array();
        var adultStatus = 0; // 0 无成人 1有成人
        var orderPrice = 0; // 总金额
        $('.spinner').each(function () {
            var number = $(this).val();
            var strArray = $(this).attr('id').split('-');
            var detailId = strArray[1];
            var name = $(this).attr('data-name');
            var price= $(this).attr('data-price');
            var userDetailModel = {
                id: detailId,
                name: name,
                price: price,
                number: number
            };
            orderPrice += number * parseFloat(price);
            userDetails.push(userDetailModel);
            if (name.indexOf('儿童') <0 && number >0) {
                console.log("有成人");
                adultStatus = 1;
            }
        });
        $('#userDetails').val(JSON.stringify(userDetails));
        if (adultStatus == 1) {
            var text = "活动日内，每位客户每日只可享受一次满减活动，活动期累计两次。点击“确定”填写报名信息，点击“取消”修改路线";
            var confirmResult = false;
            if (orderPrice <= 300) {
                confirmResult = confirm("友情提示！                                                                   您的支付金额小于300元，不享受满300减60优惠。" + text);
            } else {
                confirmResult = confirm("友情提示！                                                                   您的支付金额大于300元，享受满300减60优惠。" + text);
            }
            if (confirmResult) {
                console.log("提交");
                document.getElementById("sign-form").submit();
            }
        } else {
            alert("类型中应至少选择一位成人");
        }

    }

</script>
</body>
</html>

